﻿<!DOCTYPE html>
<html>
<head>
  <title>Data Inspector</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <meta name="description" content="TypeScript: An HTML panel that displays the properties of some model data and allows the user to edit their values." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="../samples/assets/require.js"></script>
  <script src="../assets/js/goSamples.js"></script>
  <!-- this is only for the GoJS Samples framework -->
  <link rel='stylesheet' href='DataInspector.css' />
  <script id='code'>
    require(["DataInspectorScript"], function(app) {
      app.init();
    });
  </script>
</head>

<body>
	<div id="sample">
		<span style="display: inline-block; vertical-align: top;">
      <div style="margin-left: 10px;">
        <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px;"></div>
      </div>
    </span>
		<span style="display: inline-block; vertical-align: top;">
      Selected Part:<br/>
      <div id="myInspectorDiv1" class="inspector"> </div><br/>
      First Node's data:<br />
      <div id="myInspectorDiv2" class="inspector"> </div><br />
      Model.modelData:<br />
      <div id="myInspectorDiv3" class="inspector"> </div><br />
    </span>
		<div>
			<p>An HTML-based inspector that displays and allows editing of data for the selected Part (if any), or for a particular JavaScript
				object, or for the shared <a>Model.modelData</a> object, which exists even if there are no nodes or links.
			<p>The inspector code lies in <a href="DataInspector.ts">DataInspector.ts</a> and <a href="DataInspector.css">DataInspector.css</a>.
				This code is meant to be a starting point for making your own model data inspector.
			<p>On browsers that support it, color types display a color picker. There are various plugins and polyfills for this functionaltiy
				if you wish to extend the data inspector.
			<p>This shows the contents of the model after each transaction:
				<pre id="savedModel" />
		</div>
	</div>
</body>
</html>